<template>
  <div>
    <Row :gutter="10">
      <Col>
        <Card>
          <div class="live_wrapper clearfix" style="margin-top: 10px">
            <Button type="primary"
                    @click.stop="exportData()"
                    style="float:right; width: 80px;height: 34px;font-size: 14px; margin-left: 10px">导出
            </Button>
            <Select v-model="filter.customer_id"
                    style="width: 200px;margin-right: 10px;float: left;"
                    filterable
                    label-in-value
                    @on-change="search"
                    placeholder="请选择客户">
              <Option value=0>全部</Option>
              <Option :value="item.id" v-for="(item, index) in customer_list" :key="index">{{ item.name }}</Option>
            </Select>
            <Select v-model="filter.good_id"
                    style="width: 200px;margin-right: 10px;float: left;"
                    filterable
                    label-in-value
                    @on-change="search"
                    placeholder="请选择商品">
              <Option value=0>全部</Option>
              <Option :value="item.id" v-for="(item, index) in goods_list" :key="index">{{ item.name }}</Option>
            </Select>
          </div>

          <p class="admin_title">全部收藏</p>

          <Row class="margin-top-10 table_pattern table_pattern2">
            <Table style="width: calc(100vw - 256px - 36px - 32px)"
                   :loading="loading"
                   :columns="columns"
                   :data="list"></Table>
          </Row>
          <Row class="margin-top-10">
            <Page :total="pagenation.totalPage"
                  :page-size="pagenation.perPage"
                  :current="pagenation.currentPage"
                  show-elevator
                  show-total
                  @on-change="change"></Page>
          </Row>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>

import {
  customerCollectList,
  goodsListForSelect,
  customerListForSelect
} from '@/api/main'

export default {
  name: 'collect-list',
  data () {
    return {
      pagenation: {},
      columns: [
        {
          key: 'customer_name',
          title: '客户姓名',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.customer_name)
          },
        },
        {
          title: '商品名称',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.good_name)
          },
        },
        {
          title: '收藏时间',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.created_time)
          },
        },
      ],
      list: [],
      loading: true,
      filter: {
        page: 0,
        page_size: 20,
        customer_id: 0,
        good_id: 0,
      },
      goods_list: [],
      customer_list: [],
    }
  },
  watch: {},
  methods: {
    change: function (page) {
      this.loading = true
      this.filter.page = page - 1
      this.getList()
    },
    search: function () {
      this.filter.page = 0
      this.getList()
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    exportData () {
      let _this = this
      _this.filter.page = 0
      _this.filter.page_size = 500
      _this.export_list = []
      _this.export()
    },
    export () {
      let _this = this
      customerCollectList(this.filter).then(res => {
        if (res.code == 0) {
          if (res.data.length) {
            _this.export_list.push.apply(_this.export_list, res.data)
            _this.filter.page++
            setTimeout(() => {
              _this.export()
            }, 500)
          } else {
            _this.filter.page_size = 20
            const { export_json_to_excel } = require('../../excel/Export2Excel');
            const tHeader = ['客户姓名', '商品', '收藏时间'];
            const filterVal = ['customer_name', 'good_name'];
            const data = _this.formatJson(filterVal, _this.export_list, 'created_time')
            export_json_to_excel(tHeader, data, '客户收藏列表')
          }
        }
      })
    },
    getList () {
      customerCollectList(this.filter).then(res => {
        if (res.code == 0) {
          this.list = res.data
          this.loading = false
          this.pagenation.currentPage = parseInt(res.currentPage) + 1
          this.pagenation.totalPage = parseInt(res.totalPage)
          this.pagenation.perPage = parseInt(res.perPage)
        }
      })
    },
  },
  mounted () {
    this.getList()

    goodsListForSelect().then(res => {
      if (res.code === 0) {
        this.goods_list = res.data || []
      }
    })

    customerListForSelect().then(res => {
      if (res.code === 0) {
        this.customer_list = res.data || []
      }
    })
  }
}
</script>
<style>
</style>
<style scoped lang="less">

</style>
